<template>
  <div>
    <van-nav-bar title="订单详情" left-arrow @click-left="back" />
    <div class="order-detail__tit">交易待处理</div>
    <div class="order-detail__receive">
      <div class="order-detail__receive__icon">
        <i class="iconfont icon-zuobiao1"></i>
      </div>
      <div class="order-detail__receive__msg">
        <div>收货人：YiKa &nbsp;&nbsp;&nbsp;13204630391</div>
        <div class="order-detail__receive__add">
          <div class="order-detail__receive__add_tit">收货地址：</div>
          <div class="order-detail__receive__add_text">广东省深圳市福田区深南东路</div>
        </div>
      </div>
    </div>
    <div class="order-detail__sender">
      <van-cell title="配送员设置" icon="location-o" is-link @click.native="chooseSender">
        <i slot="icon" class="iconfont icon-waimai"></i>
      </van-cell>
    </div>
    <van-popup v-model="popupShow" position="bottom">
      <van-picker show-toolbar title="配送员" :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
    </van-popup>
    <div class="order-info order-detail_info">
      <div class="order-info__item">
        <div class="order-info__item__el order-info__item__num">订单号：56468764354</div>
        <div class="order-info__item__el order-info__item__status">已完成</div>
      </div>
      <div class="order-info__item">
        <div class="order-info__item__el order-info__item__name">大桶水5L</div>
        <div class="order-info__item__el order-info__item__count">x1</div>
        <div class="order-info__item__el order-info__item__price">￥16</div>
      </div>
      <div class="order-info__item">
        <div class="order-info__item__el order-info__item__date">共1种商品</div>
        <div class="order-info__item__el order-info__item__total">合计：￥15</div>
      </div>
      <div class="order-info__item">
        <div class="order-info__item__el order-info__item__paytit">支付方式</div>
        <div class="order-info__item__el order-info__item__payway">线上支付</div>
      </div>
      <div class="order-info__item">
        <div class="order-info__item__el">备注</div>
      </div>
      <div class="order-info__item">
        <div class="order-info__item__el">这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注</div>
      </div>
    </div>
    </van-pull-refresh>
    <van-button class="order-detail__btn" type="info" @click="confirmSend">确认发货</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      popupShow: false,
      columns: ['张三', '张三', '王五']
    };
  },
  methods: {
    confirmSend() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确认发货？'
        })
        .then(() => {
          this.$toast.success('发货成功');
        })
        .catch(() => {
          // on cancel
        });
    },
    onCancel() {
      this.popupShow = false;
    },
    onConfirm() {
      this.popupShow = false;
      this.$toast.success('保存成功');
    },
    chooseSender() {
      this.popupShow = true;
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
@import '../../styles/variable.less';

.order-info {
  padding: 5px 10px;
  color: #333333;
  background-color: #fff;
  margin-bottom: 10px;
}

.order-info.order-info__finished {
  color: #999999;
}

.order-info__item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
}

.order-info__item:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

.order-info__item__status__wait {
  color: #32b750;
}

.order-info__item__name {
  flex: 0 0 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-detail__tit {
  background: @col-linear;
  color: #fff;
  padding: 40px 15px;
  font-size: 24px;
}

.order-detail__receive {
  display: flex;
  padding: 10px 0;
  background-color: #ffffff;
  color: #333;
  border-bottom: 1px solid #d9d9d9;
}

.order-detail__receive__icon {
  display: flex;
  justify-content: center;
  flex: 0 0 50px;
  padding-top: 5px;
}

.order-detail__receive__icon > i {
  font-size: 20px;
}

.order-detail__receive__msg {
  padding-right: 10px;
  font-size: 14px;
}

.order-detail__receive__add {
  display: flex;
}

.order-detail__receive__add_tit {
  width: 80px;
}

.order-detail__sender {
  margin: 10px 0;
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}

.order-detail__sender .mint-cell-text {
  font-size: 14px;
}

.order-detail__sender .iconfont {
  position: relative;
  top: 2px;
  margin-right: 10px;
  font-size: 20px;
}

.order-info.order-detail_info {
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  background-color: #ffffff;
  color: #585858;
}

.order-detail__btn {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-radius: 0;
}

.sender-popup {
  width: 100%;
}

.order-info__item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
}

.order-info__item:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

.order-info__item__status__wait {
  color: #32b750;
}

.order-info__item__name {
  flex: 0 0 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.order-info__item__num {
  color: @col-the;
}
</style>
